<!--
 * @Author: yaoling 1871883713@qq.com
 * @Date: 2022-12-02 04:33:33
 * @LastEditors: yaoling 1871883713@qq.com
 * @LastEditTime: 2022-12-16 10:50:10
 * @FilePath: \company-world\src\views\home\components\ApplicationMarket.vue
 * @Description: 头部栏
-->
<template>
  <div class="banner">
    <div class="banner-tool-breadcrumb">
      <div class="breadcrumb">
        <el-breadcrumb
          class="breadcrumb"
          :separator-icon="ArrowRight"
          v-if="firstRouter && secondRouter"
        >
          <el-breadcrumb-item>
            <i :class="'iconfont ' + firstIcon" class="icon"></i>
            {{ firstRouter }}</el-breadcrumb-item
          >
          <el-breadcrumb-item>
            <i :class="'iconfont ' + secondIcon" class="icon"></i>
            {{ secondRouter }}</el-breadcrumb-item
          >
        </el-breadcrumb>
      </div>
      <!-- 头像、消息提示框 -->
      <MessageAvatar></MessageAvatar>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ArrowRight, Monitor } from '@element-plus/icons-vue'
import MessageAvatar from './MessageAvatar.vue'
import { ref, watch, Ref } from 'vue'
import { useRoute } from 'vue-router'
const value = ref('')
/**
 * @desc: 获取当前路径标题、图标
 */
const route = useRoute()
let firstRouter = ref()
let secondRouter = ref()
let firstIcon = ref()
let secondIcon = ref()
const getBreadCom = () => {
  let mached = route.matched.filter((item) => item.meta.title)
  firstRouter.value = mached[0]?.meta?.title
  firstIcon.value = mached[0]?.meta?.icon
  secondRouter.value = mached[1]?.meta?.title
  secondIcon.value = mached[1]?.meta?.icon
}
getBreadCom()
/**
 * @desc: 路径改变时触发
 */
watch(
  () => route.path,
  () => getBreadCom()
)
</script>

<style lang="less" scoped>
@media screen and (max-width: 1000px) {
  .home-tool {
    .banner  {
      display: none;
    }
  }
}

:deep(.el-breadcrumb__separator.el-icon) {
  margin: 0 18px;
}
.icon {
  margin-right: 5px;
  font-size: 15px;
}
.banner  {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: auto;
  margin-top: 21px;
  padding: 8px 0 8px 10px;
  box-sizing: border-box;
  background-color: #ffffff;
  border-radius: 8px;
  .banner-tool-breadcrumb {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 52px;
    padding: 0 21px 0 8px;
    box-sizing: border-box;
    .breadcrumb {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: auto;
      .breadcrumb {
        display: flex;
        align-items: center;
        height: 24px;
        color: #2a2f3d;
        font-size: 15px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        line-height: 24px;
      }
    }
  }
}
</style>
